<style>
  .button-group > cr-button {
    margin-inline-start: 10px;
  }

  .tabpanel > div {
    margin-bottom: 10px;
  }

  #global-policy {
    white-space: pre-wrap;
  }

  #select-div {
    display: flex;
    height: 400px;
    width: 500px;
  }

  #onc-import-result {
    margin: 10px 0
  }

  iron-pages {
    flex: 1;
    position: relative;
  }

  network-select {
    flex: 1;
  }

  .error {
    color: red;
  }
</style>

<cr-tabs selected="{{selectedTab_}}" tab-names="[[tabNames_]]">
</cr-tabs>
<iron-pages selected="[[selectedTab_]]">
  <div class="tabpanel" id="general">
    <h2>$i18n{titleText}</h2>
    <div>
      <h2>$i18n{globalPolicyLabel}</h2>
      <div id="global-policy"></div>
    </div>

    <div>
      <h2>$i18n{dhcpHostnameLabel}</h2>
      <cr-input id="hostnameInput" value="{{hostname_}}"
          on-change="onHostnameChanged_">
      </cr-input>
    </div>

    <div>
      <h2>$i18n{cellularActivationLabel}</h2>
      <cr-button class="action-button" id="cellular-activation-button"
          on-click="openCellularActivationUi_">
        $i18n{cellularActivationButtonText}
      </cr-button>
      <div id="cellular-error-text" class="error" hidden>
        $i18n{noCellularErrorText}
      </div>
    </div>

    <div>
      <h2>$i18n{resetESimCacheLabel}</h2>
      <cr-button class="action-button" on-click="onResetESimCacheClick_">
        $i18n{resetESimCacheButtonText}
      </cr-button>
    </div>

    <div>
      <h2>$i18n{addNewWifiLabel}</h2>
      <cr-button class="action-button" id="add-new-wifi-button"
          on-click="showAddNewWifi_">
        $i18n{addNewWifiButtonText}
      </cr-button>
    </div>

    <div>
      <h2>$i18n{importOncButtonText}</h2>
      <input type="file" id="import-onc" on-change="onImportOncChange_">
      <div id="onc-import-result"></div>
    </div>
  </div>

  <div class="tabpanel" id="health">
    <h2>$i18n{networkHealthLabel}</h2>
    <network-health-summary></network-health-summary>
    <h2>$i18n{networkDiagnosticsLabel}</h2>
    <div class="button-group">
      <cr-button on-click="onRunAllRoutinesClick_">
        [[i18n('NetworkDiagnosticsRunAll')]]
      </cr-button>
      <cr-button on-click="onSendFeedbackReportClick_">
        [[i18n('NetworkDiagnosticsSendFeedback')]]
      </cr-button>
    </div>
    <network-diagnostics id="network-diagnostics"
        on-open-feedback-dialog="onOpenFeedbackDialog_">
    </network-diagnostics>
  </div>

  <div class="tabpanel" id="logs">
    <network-logs-ui></network-logs-ui>
  </div>

  <div class="tabpanel" id="state">
    <network-state-ui></network-state-ui>
  </div>

  <div class="tabpanel" id="select">
    <div id="select-div">
      <network-select
          on-network-item-selected="onNetworkItemSelected_"
          on-custom-item-selected="onCustomItemSelected_">
      </network-select>
    </div>
  </div>

  <div class="tabpanel" id="counters">
    <traffic-counters id="traffic-counters"></traffic-counters>
  </div>
</iron-pages>
